<template>
  <section class="py-16 bg-gradient-to-br from-gray-50 to-blue-50/30   transition-colors duration-300">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900  mb-4 leading-tight">
          <span class="block font-extrabold tracking-tight">{{ titleLine1 }}</span>
          <span class="block bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent font-black tracking-wide">
            {{ titleLine2 }}
          </span>
        </h2>
        <p class="text-lg text-gray-600  max-w-3xl mx-auto leading-relaxed">
          <span class="font-semibold text-gray-800 ">{{ subtitleHighlight1 }}</span> {{ subtitleText }}
          <span class="font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">{{ subtitleHighlight2 }}</span>
        </p>
      </div>

      <div class="flex flex-col md:flex-row gap-6 items-center justify-center max-w-4xl mx-auto">
        <!-- Enhanced Search bar -->
        <div class="relative flex-1 max-w-2xl">
          <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <input 
            :value="searchQuery"
            @input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
            type="text" 
            :placeholder="searchPlaceholder" 
            class="block w-full pl-12 pr-4 py-4 border-2 border-gray-200  rounded-2xl leading-5 bg-white/80  backdrop-blur-sm placeholder-gray-500  focus:outline-none focus:placeholder-gray-400  focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-lg shadow-lg hover:shadow-xl transition-all duration-300 text-gray-900 "
          />
        </div>

        <!-- Enhanced Filter buttons -->
        <div class="flex gap-3 relative">
          <!-- Categories Button -->
          <div class="relative">
            <button 
              @click="toggleCategoriesDropdown"
              class="group flex items-center gap-2 px-6 py-4 bg-white/80  backdrop-blur-sm border-2 border-gray-200  rounded-2xl hover:border-blue-300 hover:bg-white  transition-all duration-300 shadow-lg hover:shadow-xl"
            >
              <span class="font-medium text-gray-700  group-hover:text-blue-600 transition-colors duration-300">Categories</span>
              <svg class="w-4 h-4 text-gray-400  group-hover:text-blue-600 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            
            <!-- Categories Dropdown -->
            <div v-if="showCategoriesDropdown" class="absolute top-full left-0 mt-2 w-80 bg-white/95  backdrop-blur-sm rounded-2xl shadow-2xl border border-gray-200/50 /50 p-6 z-50">
              <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900  text-lg">Categories</h3>
                <button 
                  @click="clearCategories"
                  class="text-sm text-blue-600  hover:text-blue-800  font-medium transition-colors duration-200"
                >
                  Clear All
                </button>
              </div>
              <div class="space-y-3">
                <label v-for="category in categories" :key="category.value" class="flex items-center group cursor-pointer p-2 rounded-lg hover:bg-gray-50  transition-all duration-200">
                  <input 
                    :checked="selectedCategories.includes(category.value)"
                    @change="toggleCategory(category.value)"
                    type="checkbox" 
                    class="w-4 h-4 rounded border-gray-300  text-blue-600 focus:ring-0 focus:outline-none bg-white "
                  />
                  <span class="ml-3 text-sm text-gray-700  group-hover:text-gray-900  transition-colors duration-200">{{ category.label }}</span>
                </label>
              </div>
            </div>
          </div>
          
          <!-- Pricing Button -->
          <div class="relative">
            <button 
              @click="togglePricingDropdown"
              class="group flex items-center gap-2 px-6 py-4 bg-white/80  backdrop-blur-sm border-2 border-gray-200  rounded-2xl hover:border-purple-300 hover:bg-white  transition-all duration-300 shadow-lg hover:shadow-xl"
            >
              <span class="font-medium text-gray-700  group-hover:text-purple-600 transition-colors duration-300">Pricing</span>
              <svg class="w-4 h-4 text-gray-400  group-hover:text-purple-600 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            
            <!-- Pricing Dropdown -->
            <div v-if="showPricingDropdown" class="absolute top-full left-0 mt-2 w-64 bg-white/95  backdrop-blur-sm rounded-2xl shadow-2xl border border-gray-200/50 /50 p-6 z-50">
              <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900  text-lg">Pricing</h3>
                <button 
                  @click="clearPricing"
                  class="text-sm text-purple-600  hover:text-purple-800  font-medium transition-colors duration-200"
                >
                  Clear All
                </button>
              </div>
              <div class="space-y-3">
                <label v-for="pricing in pricingOptions" :key="pricing.value" class="flex items-center group cursor-pointer p-2 rounded-lg hover:bg-gray-50  transition-all duration-200">
                  <input 
                    :checked="selectedPricing === pricing.value"
                    @change="$emit('update:selectedPricing', pricing.value)"
                    type="radio" 
                    name="pricing"
                    class="w-4 h-4 border-gray-300  text-purple-600 focus:ring-0 focus:outline-none bg-white "
                  />
                  <span class="ml-3 text-sm text-gray-700  group-hover:text-gray-900  transition-colors duration-200">{{ pricing.label }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'

  // Props
  interface Props {
    searchQuery: string
    selectedCategories: string[]
    selectedPricing: string
    titleLine1?: string
    titleLine2?: string
    subtitleHighlight1?: string
    subtitleText?: string
    subtitleHighlight2?: string
    searchPlaceholder?: string
    categories?: Array<{ value: string; label: string }>
    pricingOptions?: Array<{ value: string; label: string }>
  }

  const props = withDefaults(defineProps<Props>(), {
    titleLine1: 'Find Your',
    titleLine2: 'Perfect AI Match',
    subtitleHighlight1: '500+ AI agents',
    subtitleText: 'ready to automate your workflow.',
    subtitleHighlight2: 'Find yours in seconds.',
    searchPlaceholder: 'What do you want to automate?',
    categories: () => [
      { value: 'coding', label: 'Coding Agent' },
      { value: 'agentic-framework', label: 'Agentic Framework' },
      { value: 'chatbot-builder', label: 'Chatbot Builder' },
      { value: 'low-code-builder', label: 'Low-Code Agents Builder' },
      { value: 'digital-worker', label: 'Digital Worker' },
      { value: 'writing', label: 'Writing Agent' },
      { value: 'analysis', label: 'Analysis Agent' },
      { value: 'automation', label: 'Automation Agent' },
      { value: 'creative', label: 'Creative Agent' }
    ],
    pricingOptions: () => [
      { value: '', label: 'All Pricing' },
      { value: 'free', label: 'Free' },
      { value: 'freemium', label: 'Freemium' },
      { value: 'paid', label: 'Paid' }
    ]
  })

  // Emits
  const emit = defineEmits<{
    'update:searchQuery': [value: string]
    'update:selectedCategories': [value: string[]]
    'update:selectedPricing': [value: string]
  }>()

  // State
  const showCategoriesDropdown = ref(false)
  const showPricingDropdown = ref(false)

  // Methods
  const toggleCategoriesDropdown = () => {
    showCategoriesDropdown.value = !showCategoriesDropdown.value
    showPricingDropdown.value = false
  }

  const togglePricingDropdown = () => {
    showPricingDropdown.value = !showPricingDropdown.value
    showCategoriesDropdown.value = false
  }

  const toggleCategory = (categoryValue: string) => {
    const newCategories = [...props.selectedCategories]
    const index = newCategories.indexOf(categoryValue)

    if (index > -1) {
      newCategories.splice(index, 1)
    } else {
      newCategories.push(categoryValue)
    }

    emit('update:selectedCategories', newCategories)
  }

  const clearCategories = () => {
    emit('update:selectedCategories', [])
  }

  const clearPricing = () => {
    emit('update:selectedPricing', '')
  }

  // Lifecycle
  onMounted(() => {
    // Close dropdowns when clicking outside
    document.addEventListener('click', (event) => {
      const target = event.target as HTMLElement
      if (!target.closest('.relative')) {
        showCategoriesDropdown.value = false
        showPricingDropdown.value = false
      }
    })
  })

  onUnmounted(() => {
    document.removeEventListener('click', () => { })
  })
</script>
